<template>
    <!-- 个人资料组件 -->
  <div class="my">
      <div class="back-nav-box">
          <back-nav left-arrow left-text='返回' title='个人资料 ' ></back-nav>
      </div>
    <!-- 图片背景 -->
        <div class="my-img">
            <img class="auto-img" :src="pictureUrl" alt="">
        </div>
        <!-- 我的详情盒子 -->
        <div class="my-box" v-for="(item,index) in personalArray"
        :key="index">
            <div class="order-box info-item">
                <div class="text-left">头像</div>
                <div class="text-img">
                    <img class="auto-img" :src="item.userImg" alt="">
                </div>
            </div>
            <div class="collect-box info-item">
                <div class="text-left">用户id</div>
                <div class="text-right">
                    {{item.userId}} 
                </div>
                
            </div>
            <div class="info-box info-item">
                <div class="text-left">昵称</div>
                <div class="text-right nickName"  @click="updateNickName($event)">
                   {{item.nickName}}
                </div>
                
            </div>
            <div class="address-box info-item">
                <div class="text-left">简介</div>
                <div class="text-right">
                    {{item.desc}}
                </div>
                
            </div>
            
        </div>
  </div>
</template>

<script>
import BackNav from '../components/BackNav.vue'
export default {
    name: 'Personal',
    components:{
        BackNav
    },
    data() {
        return {
          pictureUrl:'',
          personalArray: [],
          desc: '这家伙很懒,什么也没有留下!',
          //个人资料里预览头像图片
         
        }
    },
    created() {
        //获取背景图片
        this.pictureUrl=this.$store.state.pictureUrl;
        this.findAccountInfo();
    },
    methods: {
        //查询个人资料
        findAccountInfo() {
            this.axios({
                method: 'get',
                url: '/findAccountInfo'
            }).then(res=>{
                // 
                //用户未登录时
                if(res.data.code==700) {
                    this.$toast(res.data.msg);
                    //跳转到登录页面 (注意将url加入js白名单中)
                   setTimeout(()=>{
                       this.$router.push({name:'Login'});
                   },2000);
                }
                // 请求个人资料成功
                if(res.data.code=='B001') {
                    //如果简介为空,则为初始简介
                    if(res.data.result[0].desc=='') {
                        res.data.result[0].desc=this.desc;
                    }
                       this.personalArray=res.data.result;
                   }
            })
        },
        
       
    }
}
</script>

<style lang='less' scoped>
@import url('../assets/base.less');

.my{
    position: fixed;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    background-color: #f7f7f7;
}
.back-nav-box {
    position:sticky;
    top:0;
    color:@mainColor;
}
.text-img {
    width:45px;
    height:45px;
    border-radius: 50%;
    background-color: thistle;
    overflow: hidden;
}
.info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding:15px 0;
    font-size: 16px;
}
.text-right {
    font-size: 16px;
    color:#999;
}
.address-box {
    border-bottom:0;
}
.pic {
    position: absolute;
    left:0;
    top:0;
    z-index: 99;
    opacity: 0;
   
}
.my-img {
    width:100%;
    height:100px;
    background-color: @bg_Color;
}
.my-box {
    margin: 0 10px;
    padding: 10px;
    background-color: rgba(255,255,255,.7);
    position: relative;
    top:70px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
} 
</style>